<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="login">
      <div class="login_content">
        <div class="top_block"></div>
        <div class="top_title">宏烨找房后台管理系统</div>
        <div class="block30"></div>
        <div class="login_form">
          <div class="block20"></div>
          <div class="center">
            <div class="img_box">
              <img  :src="imgg"/>
            </div>
          </div>
          <div class="block10"></div>
          <form>
            <div>
              <div>
                <input
                  type="text"
                  placeholder="请输入用户名/姓名/手机号/邮箱"
                  name="username"
                  v-model="userForm.username"
                />
              </div>
            </div>
            <div class="block30"></div>
            <div>
              <div>
                <input
                  type="password"
                  placeholder="请输入密码"
                  name="password"
                  v-model="userForm.password"
                />
              </div>
            </div>
            <div class="block10"></div>
            <div class="checkbox">
              <label> <input type="checkbox" name="rempass" />记住密码 </label>
            </div>
            <div class="block20"></div>
            <div class="btn">
              <button
                type="button"
                class="btn"
                @click="submitForm"
              >
                登录</button
              >&nbsp;
              
            </div>
          </form>
        </div>
  
        <div class="block20"></div>
        <ALert/>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref,onMounted } from "vue";
  import {useRouter} from 'vue-router'
  import {useLogin} from '../../stores/user'
  import {getLogin} from '../../api/index'
  import { ElMessage } from 'element-plus'

  const login = useLogin()
  const router = useRouter()
  const userForm = ref({
    username: "",
    password: "",
  })
  const submitForm = async() => {
    const res :any = await getLogin(userForm.value)
    if(userForm.value.username ==''){
      ElMessage.error('用户名不能为空')
    }else if(userForm.value.password ==''){
      ElMessage.error('密码不能为空')
    }else if(res.code == 2){
      ElMessage.error('密码不正确')
    }else{
      login.Loginn(userForm.value)
      router.push('/layout/listing')
      ElMessage.success(res.msg)
    }
  };
  const imgg = ref('../../../public/imgs/logo.png')
  // onMounted(() => {
  //   let img = localStorage.getItem('img')
  //   imgg.value = img
  //   console.log(imgg.value)
  // })
  
  </script>
  
  <style lang="scss" scoped>
  .login {
    width: 1536px;
    height: 695px;
    background-image: url('../../assets/1120.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .login_content {
      width: 100%;
      height: 588.7px;
      .top_block {
        width: 100%;
        height: 97.5px;
      }
      .top_title {
        width: 100%;
        height: 26.4px;
        text-align: center;
        font-size: 20px;
        line-height: 26.4px;
      }
      .block30 {
        width: 100%;        
        height: 30px;
      }       
      .login_form {
        width: 451.6px;                                         
        height: 384.8px;
        background: rgba(255,255,255,0.5     ); 

        border-radius: 10px;
        margin: 0 auto;
        box-shadow: 0px 5px 15px 1px rgba(0, 0, 0, 0.1);
        text-align: left;
        border: 1px #dddddd solid;
        .center {
          width: 100%;
          height: 101.6px;
          .img_box {              
            width: 101.6px;
            height: 101.6px;
            margin: 0 auto;
            box-shadow: 0px 5px 15px 1px rgba(0, 0, 0, 0.1);
            border-radius: 50%;
          }
  
          img {
            width: 100%;
  
            height: 100%;
            border-radius: 50%;
            border: 1px #ffffff solid;
            background: white;
          }
        }
        .block10 {
          width: 100%;
          height: 10px;
        }
        form {
          width: 100%;
          padding: 20px;
          padding-left: 80px;
          box-sizing: border-box;
          height: 251.6px;
          div:nth-child(1) {
            width: 350px;
            height: 41.6px;
            div {
              width: 100%;
              height: 100%;
              input {
                width: 300px;
                font-size: 14px;
                resize: none;
                outline: none;
                height: 100%;
                line-height: 30px;
  
                border: 1px #cccccc solid;
                padding: 0px 5px;
                overflow: hidden;
                border-radius: 0px;
              }
              input:hover {
                border: 0.5px solid rgb(19, 137, 211);
                box-shadow: 0px 5px 15px 1px rgba(0, 0, 0, 0.1);
              }
  
              input:focus {
                border: 0.5px solid rgb(19, 137, 211);
                box-shadow: 0px 5px 15px 1px rgba(0, 0, 0, 0.1);
              }
            }
          }
          div:nth-child(3) {
            width: 350px;
            height: 41.6px;
            div {
              width: 100%;
              height: 100%;
              input {
                width: 300px;
                font-size: 14px;
                resize: none;
                outline: none;
                height: 100%;
                line-height: 30px;
  
                border: 1px #cccccc solid;
                padding: 0px 5px;
                overflow: hidden;
                border-radius: 0px;
              }
              input:hover {
                border: 0.5px solid rgb(19, 137, 211);
                box-shadow: 0px 5px 15px 1px rgba(0, 0, 0, 0.1);
              }
  
              input:focus {
                border: 0.5px solid rgb(19, 137, 211);
                box-shadow: 0px 5px 15px 1px rgba(0, 0, 0, 0.1);
              }
            }
          }
          .checkbox {
            width: 350px;
            height: 19.2px;
            input {
              width: 13px;
              resize: none;
              outline: none;
              height: 13px;
            }
          }
          .btn {
            width: 350px;
            height: 39.2px;
            button {
              width: 68px;
              height: 100%;
              color: #ffff;
              opacity: 0.8;
              border: none;
              cursor: pointer;
              font-size: 14px;
              background: #1389D3;
            }
            button:hover{
              border: 0.5px solid #1275b3;
              box-shadow: 0px 5px 15px 1px rgba(0, 0, 0, 0.1);
            }
            span {
              color: red;
            }
          }
        }
      }
      .block20 {
        width: 100%;
        height: 20px;
      }
    }
  }
  </style>